<template>
	<view class="u-page">
		常用表单项
	</view>
	<view class="f-card" >
		<view style="flex-wrap: wrap;display: flex;width: 100%;">
			<view v-for="(item,index) in assetsItems" style="flex:0 0 20%;">
				<!-- 选择列  项目-->

					<view style="display: flex;justify-content:center;align-items: center;padding:10px;">
						<view style="justify-content: space-between;margin-left: 10rpx;display: flex;align-items: flex-start;flex-direction: column;">
							<i :class="assetsItemsClass(item)" style="font-size: 24px;"></i>
							<view style="font-size: 30rpx;">{{item.name}}</view>
						</view>
					</view>
					
			</view>
			<view v-for="(item,index) in assetsItems" style="flex:0 0 20%;">
				<!-- 选择列  项目-->
			
					<view style="display: flex;justify-content:center;align-items: center;padding:10px;">
						<view style="justify-content: space-between;margin-left: 10rpx;display: flex;align-items: flex-start;flex-direction: column;">
							<i :class="assetsItemsClass(item)" style="font-size: 24px;"></i>
							<view style="font-size: 30rpx;">{{item.name}}</view>
						</view>
					</view>
					
			</view>
			<view v-for="(item,index) in assetsItems" style="flex:0 0 20%;">
				<!-- 选择列  项目-->
			
					<view style="display: flex;justify-content:center;align-items: center;padding:10px;">
						<view style="justify-content: space-between;margin-left: 10rpx;display: flex;align-items: flex-start;flex-direction: column;">
							<i :class="assetsItemsClass(item)" style="font-size: 24px;"></i>
							<view style="font-size: 30rpx;">{{item.name}}</view>
						</view>
					</view>
					
			</view>
		</view>
	</view>
	
	<view class="u-page">
		常用表单项
	</view>
	<view class="f-card" >
		<view style="flex-wrap: wrap;display: flex;width: 100%;">
			<view v-for="(item,index) in assetsItems" style="flex:0 0 20%;">
				<!-- 选择列  项目-->
	
					<view style="display: flex;justify-content:center;align-items: center;padding:10px;">
						<view style="justify-content: space-between;margin-left: 10rpx;display: flex;align-items: flex-start;flex-direction: column;">
							<i :class="assetsItemsClass(item)" style="font-size: 24px;"></i>
							<view style="font-size: 30rpx;">{{item.name}}</view>
						</view>
					</view>
					
			</view>
			<view v-for="(item,index) in assetsItems" style="flex:0 0 20%;">
				<!-- 选择列  项目-->
			
					<view style="display: flex;justify-content:center;align-items: center;padding:10px;">
						<view style="justify-content: space-between;margin-left: 10rpx;display: flex;align-items: flex-start;flex-direction: column;">
							<i :class="assetsItemsClass(item)" style="font-size: 24px;"></i>
							<view style="font-size: 30rpx;">{{item.name}}</view>
						</view>
					</view>
					
			</view>
			<view v-for="(item,index) in assetsItems" style="flex:0 0 20%;">
				<!-- 选择列  项目-->
			
					<view style="display: flex;justify-content:center;align-items: center;padding:10px;">
						<view style="justify-content: space-between;margin-left: 10rpx;display: flex;align-items: flex-start;flex-direction: column;">
							<i :class="assetsItemsClass(item)" style="font-size: 24px;"></i>
							<view style="font-size: 30rpx;">{{item.name}}</view>
						</view>
					</view>
					
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				assetsItems:[
					{
						name:'文字',
						icon:'icon-wenzi',
						text:'可插'
					},
					{
						name:'大图',
						icon:'icon-tupian1',
						text:'可完'
					},
					{
						name:'小图',
						icon:'icon-jiugongge-line-',
						text:'九宫'
					},
					{
						name:'视频',
						icon:'icon-shipin',
						text:'最多'
					},
					{
						name:'附件',
						icon:'icon-fujian02',
						text:'最多'
					},
					{
						name:'公众',
						icon:'icon-weixingongzhonghao',
						text:'可跳'
					},
					{
						name:'程序',
						icon:'icon-xiaochengxu',
						text:'程序'
					},
					{
						name:'复制',
						icon:'icon-fuzhi',
						text:'网址'
					},
					{
						name:'关联',
						icon:'icon-a-1',
						text:'接龙'
					}
				],
			}
		},
		computed:{
			assetsItemsClass()
			{
				return function(item){
					let itemsClass = {
						icon:true,
						iconfont:true
					}
					
					itemsClass[item.icon] = true
			
					return itemsClass;
				}
			}
		}
	}
</script>


<style scoped>
		/* @import '@/css/iconfont/iconfont.css'; */
	
</style>

<style>
.u-page {
	margin: 10px 0;
	padding: 0px 15px;	
}

.f-card {
	margin: 10px 0;
	padding: 15px 15px 0px 15px;
	background-color: #fff;
}
</style>
